<%@ include file="/WEB-INF/jsp/includes/include.jsp" %>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<c:choose>
			<c:when test="${project.project.id == null}">
				<c:set var="title" value="Create a Project" scope="page" />
			</c:when>
			<c:otherwise>
				<c:set var="title" value="Edit your Project" scope="page" />
			</c:otherwise>
		</c:choose>
	
		<title>${title}</title>

		<c:set var="form"><spring:theme code="form"/></c:set>
		<c:if test="${not empty form}">
			<link rel="stylesheet" href="<c:url value="${form}"/>" type="text/css" />
		</c:if>

    </head>

	<body>
		
		<h1>${title}</h1>

		<form:form id="projectEditForm" method="post" commandName="project">
		
			<fieldset>
				<legend>Project Details</legend>
				<div>
					<label for="project.name" class="mandatoryField">Name:</label>				
					<form:input path="project.name" id="project.name" size="50" maxlength="100" cssClass="text"/>
					<form:errors path="project.name" id="project.nameErrors" cssClass="error"/>
				</div>

				<c:choose>
					<c:when test="${project.project.id == null}">
						<c:if test="${owners != null}">
							<div>
								<label for="ownerId">Owner:</label>
								<form:select path="ownerId">
									<form:option label="${loggedInUser.name}" value="${loggedInUser.id}"/>
									<form:options items="${owners}"/>
								</form:select>
								<form:errors path="ownerId" id="ownerIdErrors" cssClass="error"/>
							</div>
						</c:if>
					</c:when>
					<c:otherwise>
						<div>
							<label for="ownerId">Owner:</label>
							<form:input path="project.owner.name" readonly="true" size="50" cssClass="text"/>
						</div>
					</c:otherwise>
				</c:choose>
				<div>
					 <label for="project.summary" class="mandatoryField">Summary:</label>				
					<form:input path="project.summary" id="project.summary" size="80" maxlength="100" cssClass="text"/>
					<form:errors path="project.summary" id="project.summaryErrors" cssClass="error"/>
				</div>
				<div>
				 <label for="project.description" class="mandatoryField">Description:</label>
                    <form:textarea path="project.description" id="project.description" cols="80" rows="8" cssClass="textarea"/>
					<form:errors path="project.description" id="project.descriptionErrors" cssClass="error"/>
				</div>
				<div>
					<label for="serviceCategoryIds" class="mandatoryField">Service Categories:</label>
					<form:select path="serviceCategoryIds" multiple="true" items="${serviceCategories}" itemLabel="name" itemValue="id" size="5"/>
					<form:errors path="project.serviceCategories" id="project.serviceCategoriesErrors" cssClass="error"/>
				</div>
				<div>
					<label for="project.numberRequired">Volunteers required:</label>
					<form:input path="project.numberRequired" id="project.numberRequired" size="4" maxlength="4" cssClass="text"/>
					<form:errors path="project.numberRequired" id="project.numberRequiredErrors" cssClass="error"/>
				</div>
				<div>
					<label for="skillIds">Skills required:</label>
					<form:select path="skillIds" multiple="true" items="${skills}" itemLabel="name" itemValue="id" size="5"/>
					<form:errors path="skillIds" id="skillIdsErrors" cssClass="error"/>
				</div>
				<div>
					<label for="languageIds">Languages required:</label>
					<form:select path="languageIds" multiple="true" items="${languages}" itemLabel="name" itemValue="id" size="5"/>
					<form:errors path="languageIds" id="languageIdsErrors" cssClass="error"/>
				</div>
				
				<div>
					<label for="project.recommendedFor">Recommended for:</label>
					Groups:
					<form:checkbox path="project.recommendedForGroups" id="project.recommendedForGroups" cssClass="checkbox"/>
					Youth:
					<form:checkbox path="project.recommendedForYouth" id="project.recommendedForYouth" cssClass="checkbox"/>
					Kids:
					<form:checkbox path="project.recommendedForKids" id="project.recommendedForKids" cssClass="checkbox"/>
					Oldies:
					<form:checkbox path="project.recommendedForOldies" id="project.recommendedForOldies" cssClass="checkbox"/>
					Ladies:
					<form:checkbox path="project.recommendedForLadies" id="project.recommendedForLadies" cssClass="checkbox"/>				
				</div>

				<div>
					<label>Commitment</label>
					<form:input path="project.hourlyCommitment" id="project.hourlyCommitment" size="4" maxlength="4" cssClass="text"/>
					hours per
					<form:select path="project.commitmentType">
						<form:option value="day" label="Day"/>
						<form:option value="week" label="Week"/>
						<form:option value="fortnight" label="Fortnight"/>
						<form:option value="month" label="Month"/>
					</form:select>
					<form:errors path="project.hourlyCommitment" id="project.hourlyCommitmentErrors" cssClass="error"/>
				</div>							
			</fieldset>

			<fieldset>
				<legend>Project Dates</legend>
				<div>
					<label for="project.startDate.date">Start date:</label>
					<form:select path="project.startDate.dayStr" items="${days}" id="project.startDate.dayStr"/>
					<form:select path="project.startDate.month" items="${months}" id="project.startDate.month"/>
					<form:select path="project.startDate.year" items="${years}" id="project.startDate.year"/>
					<form:errors path="project.startDate.date" id="startDateErrors" cssClass="error"/>
				</div>
				<div>
					<label for="project.endDate.date">End date:</label>
					<form:select path="project.endDate.dayStr" items="${days}" id="project.endDate.dayStr"/>
					<form:select path="project.endDate.month" items="${months}" id="project.endDate.month"/>
					<form:select path="project.endDate.year" items="${years}" id="project.endDate.year"/>
					<form:errors path="project.endDate.date" id="endDateErrors" cssClass="error"/>
				</div>
				<div>
					Or
				</div>
				<div>
					<label for="onGoing">Ongoing Project:</label>
					<form:checkbox path="project.onGoing" id="project.onGoing" cssClass="checkbox"/>
					<form:errors path="project.onGoing" id="project.onGoingErrors" cssClass="error"/>
				</div>
			</fieldset>
			

			<fieldset>
				<legend>Location:</legend>
				
				<div>
 					<label for="project.workFromHome">Work from:</label>
					Home:
					<form:checkbox path="project.workFromHome" id="project.workFromHome" cssClass="checkbox"/>
					On site:
					<form:checkbox path="project.workOnSite" id="project.workOnSite" cssClass="checkbox"/>
				</div>
				
				<div>
					<label for="project.location.number">Number:</label>
					<form:input path="project.location.number" id="project.location.number" size="8" maxlength="8" cssClass="text"/>
					<form:errors path="project.location.number" id="project.locationNumberErrors" cssClass="error"/>
				</div>
				<div>
					<label for="project.location.street" class="mandatoryField">Street:</label>
					<form:input path="project.location.street" id="project.location.street" size="50" cssClass="text"/>
					<form:errors path="project.location.street" id="project.locationStreetErrors" cssClass="error"/>
				</div>
				<div>
					<label for="project.location.suburb" class="mandatoryField">Suburb:</label>
					<form:input path="project.location.suburb" id="project.location.suburb" size="50" cssClass="text"/>
					<form:errors path="project.location.suburb" id="project.locationSuburbErrors" cssClass="error"/>
				</div>
				<div>
					<label for="project.location.city" class="mandatoryField">City:</label>
					<form:input path="project.location.city" id="project.location.city" size="50" cssClass="text"/>
					<form:errors path="project.location.city" id="project.locationCityErrors" cssClass="error"/>
				</div>
				<div>
					<label for="project.location.state" class="mandatoryField">State:</label>
					<form:select path="project.location.state" id="project.location.state">
						<form:option label="Pick a state" value="" />
						<form:options items="${states}"/>
					</form:select>
					<form:errors path="project.location.state" id="project.locationStateErrors" cssClass="error"/>
				</div>
				<div>
					<label for="project.location.postcode" class="mandatoryField">Postcode:</label>
					<form:input path="project.location.postcode" id="project.location.postcode" size="4" maxlength="4" cssClass="text"/>
					<form:errors path="project.location.postcode" id="project.locationPostcodeErrors" cssClass="error"/>
				</div>
				<div>
					<label for="project.location.country" class="mandatoryField">Country:</label>
					<form:select path="project.location.country" items="${countries}" id="organisation.address.country"/>
					<form:errors path="project.location.country" id="project.locationCountryErrors" cssClass="error"/>
				</div>
			</fieldset>


			<fieldset>
				<legend>Project Times</legend>
				
				<div>
					<label for="project.availability.sundayStart.date">Sunday:</label>
					<form:checkbox path="project.availability.availableOnSunday"/>
					Open between
					<form:select path="project.availability.sundayStart.hourStr" items="${hours}" id="project.availability.sundayStart.hourStr"/>
					:
					<form:select path="project.availability.sundayStart.minuteStr" items="${minutes}" id="project.availability.sundayStart.minuteStr"/>
					and
					<form:select path="project.availability.sundayEnd.hourStr" items="${hours}" id="project.availability.sundayEnd.hourStr"/>
					:
					<form:select path="project.availability.sundayEnd.minuteStr" items="${minutes}" id="project.availability.sundayEnd.minuteStr"/>
				</div>
				<div>
					<label for="project.availability.mondayStart.date">Monday:</label>
					<form:checkbox path="project.availability.availableOnMonday"/>
					Open between
					<form:select path="project.availability.mondayStart.hourStr" items="${hours}" id="project.availability.mondayStart.hourStr"/>
					:
					<form:select path="project.availability.mondayStart.minuteStr" items="${minutes}" id="project.availability.mondayStart.minuteStr"/>
					and
					<form:select path="project.availability.mondayEnd.hourStr" items="${hours}" id="project.availability.mondayEnd.hourStr"/>
					:
					<form:select path="project.availability.mondayEnd.minuteStr" items="${minutes}" id="project.availability.mondayEnd.minuteStr"/>
				</div>
				<div>
					<label for="project.availability.tuesdayStart.date">Tuesday:</label>
					<form:checkbox path="project.availability.availableOnTuesday"/>
					Open between
					<form:select path="project.availability.tuesdayStart.hourStr" items="${hours}" id="project.availability.tuesdayStart.hourStr"/>
					:
					<form:select path="project.availability.tuesdayStart.minuteStr" items="${minutes}" id="project.availability.tuesdayStart.minuteStr"/>
					and
					<form:select path="project.availability.tuesdayEnd.hourStr" items="${hours}" id="project.availability.tuesdayEnd.hourStr"/>
					:
					<form:select path="project.availability.tuesdayEnd.minuteStr" items="${minutes}" id="project.availability.tuesdayEnd.minuteStr"/>
				</div>
				<div>
					<label for="project.availability.wednesdayStart.date">Wednesday:</label>
					<form:checkbox path="project.availability.availableOnWednesday"/>
					Open between
					<form:select path="project.availability.wednesdayStart.hourStr" items="${hours}" id="project.availability.wednesdayStart.hourStr"/>
					:
					<form:select path="project.availability.wednesdayStart.minuteStr" items="${minutes}" id="project.availability.wednesdayStart.minuteStr"/>
					and
					<form:select path="project.availability.wednesdayEnd.hourStr" items="${hours}" id="project.availability.wednesdayEnd.hourStr"/>
					:
					<form:select path="project.availability.wednesdayEnd.minuteStr" items="${minutes}" id="project.availability.wednesdayEnd.minuteStr"/>
				</div>
				<div>
					<label for="project.availability.thursdayStart.date">Thursday:</label>
					<form:checkbox path="project.availability.availableOnThursday"/>
					Open between
					<form:select path="project.availability.thursdayStart.hourStr" items="${hours}" id="project.availability.thursdayStart.hourStr"/>
					:
					<form:select path="project.availability.thursdayStart.minuteStr" items="${minutes}" id="project.availability.thursdayStart.minuteStr"/>
					and
					<form:select path="project.availability.thursdayEnd.hourStr" items="${hours}" id="project.availability.thursdayEnd.hourStr"/>
					:
					<form:select path="project.availability.thursdayEnd.minuteStr" items="${minutes}" id="project.availability.thursdayEnd.minuteStr"/>
				</div>
				<div>
					<label for="project.availability.fridayStart.date">Friday:</label>
					<form:checkbox path="project.availability.availableOnFriday"/>
					Open between
					<form:select path="project.availability.fridayStart.hourStr" items="${hours}" id="project.availability.fridayStart.hourStr"/>
					:
					<form:select path="project.availability.fridayStart.minuteStr" items="${minutes}" id="project.availability.fridayStart.minuteStr"/>
					and
					<form:select path="project.availability.fridayEnd.hourStr" items="${hours}" id="project.availability.fridayEnd.hourStr"/>
					:
					<form:select path="project.availability.fridayEnd.minuteStr" items="${minutes}" id="project.availability.fridayEnd.minuteStr"/>
				</div>
				<div>
					<label for="project.availability.saturdayStart.date">Saturday:</label>
					<form:checkbox path="project.availability.availableOnSaturday"/>
					Open between
					<form:select path="project.availability.saturdayStart.hourStr" items="${hours}" id="project.availability.saturdayStart.hourStr"/>
					:
					<form:select path="project.availability.saturdayStart.minuteStr" items="${minutes}" id="project.availability.saturdayStart.minuteStr"/>
					and
					<form:select path="project.availability.saturdayEnd.hourStr" items="${hours}" id="project.availability.saturdayEnd.hourStr"/>
					:
					<form:select path="project.availability.saturdayEnd.minuteStr" items="${minutes}" id="project.availability.saturdayEnd.minuteStr"/>
				</div>

			</fieldset>
				
			
			<fieldset>
				<legend>Contact Details</legend>
				<div>
					<label for="project.contactInfo.name" class="mandatoryField">Contact Name:</label>
					<form:input path="project.contactInfo.name" id="project.contactInfo.name" size="50" maxlength="100" cssClass="text"/>
					<form:errors path="project.contactInfo.name" id="project.contactInfoNameErrors" cssClass="error"/>
				</div>
				<div>
					<label for="project.contactInfo.emailAddress" class="mandatoryField">Email Address:</label>
					<form:input path="project.contactInfo.emailAddress" id="project.contactInfo.emailAddress" size="50" maxlength="100" cssClass="text"/>
					<form:errors path="project.contactInfo.emailAddress" id="project.contactInfoEmailAddressErrors" cssClass="error"/>
				</div>
				<div>
					<label for="project.contactInfo.homePhone">Home Phone:</label>
					<form:input path="project.contactInfo.homePhone" id="project.contactInfo.homePhone" size="50" cssClass="text"/>
					<form:errors path="project.contactInfo.homePhone" id="project.contactInfoHomePhoneErrors" cssClass="error"/>
				</div>
				<div>
					<label for="project.contactInfo.workPhone">Work Phone:</label>
					<form:input path="project.contactInfo.workPhone" id="project.contactInfo.workPhone" size="50" cssClass="text"/>
					<form:errors path="project.contactInfo.workPhone" id="project.contactInfoWorkPhoneErrors" cssClass="error"/>
				</div>
				<div>
					<label for="project.contactInfo.mobilePhone">Mobile Phone:</label>
					<form:input path="project.contactInfo.mobilePhone" id="project.contactInfo.mobilePhone" size="50" cssClass="text"/>
					<form:errors path="project.contactInfo.mobilePhone" id="project.contactInfoMobilePhoneErrors" cssClass="error"/>
				</div>
				<div>
					<label for="project.contactInfo.faxNumber">Fax Number:</label>				
					<form:input path="project.contactInfo.faxNumber" id="project.contactInfo.faxNumber" size="50" cssClass="text"/>
					<form:errors path="project.contactInfo.faxNumber" id="project.contactInfoFaxNumberErrors" cssClass="error"/>
				</div>
				<div>
					<label for="project.contactInfo.website">Website:</label>				
					<form:input path="project.contactInfo.website" id="project.contactInfo.website" size="50" cssClass="text"/>
					<form:errors path="project.contactInfo.website" id="project.contactInfoWebsiteErrors" cssClass="error"/>
				</div>
			</fieldset>
			
			<fieldset>
				<legend>Address</legend>
				<div>
					<label for="project.contactInfo.address.number">Number:</label>
					<form:input path="project.contactInfo.address.number" id="project.contactInfo.address.number" size="8" maxlength="8" cssClass="text"/>
					<form:errors path="project.contactInfo.address.number" id="project.contactInfo.addressNumberErrors" cssClass="error"/>
				</div>
				<div>
					<label for="project.contactInfo.address.street" class="mandatoryField">Street:</label>
					<form:input path="project.contactInfo.address.street" id="project.contactInfo.address.street" size="50" cssClass="text"/>
					<form:errors path="project.contactInfo.address.street" id="project.contactInfo.addressStreetErrors" cssClass="error"/>
				</div>
				<div>
					<label for="project.contactInfo.address.suburb" class="mandatoryField">Suburb:</label>
					<form:input path="project.contactInfo.address.suburb" id="project.contactInfo.address.suburb" size="50" cssClass="text"/>
					<form:errors path="project.contactInfo.address.suburb" id="project.contactInfo.addressSuburbErrors" cssClass="error"/>
				</div>
				<div>
					<label for="project.contactInfo.address.city" class="mandatoryField">City:</label>
					<form:input path="project.contactInfo.address.city" id="project.contactInfo.address.city" size="50" cssClass="text"/>
					<form:errors path="project.contactInfo.address.city" id="project.contactInfo.addressCityErrors" cssClass="error"/>
				</div>
				<div>
					<label for="project.contactInfo.address.state" class="mandatoryField">State:</label>
					<form:select path="project.contactInfo.address.state" id="project.contactInfo.address.state">
						<form:option label="Pick a state" value="" />
						<form:options items="${states}"/>
					</form:select>
					<form:errors path="project.contactInfo.address.state" id="project.contactInfo.addressStateErrors" cssClass="error"/>
				</div>
				<div>
					<label for="project.contactInfo.address.postcode" class="mandatoryField">Postcode:</label>
					<form:input path="project.contactInfo.address.postcode" id="project.contactInfo.address.postcode" size="4" maxlength="4" cssClass="text"/>
					<form:errors path="project.contactInfo.address.postcode" id="project.contactInfo.addressPostcodeErrors" cssClass="error"/>
				</div>
				<div>
					<label for="project.contactInfo.address.country" class="mandatoryField">Country:</label>
					<form:select path="project.contactInfo.address.country" items="${countries}" id="organisation.address.country"/>
					<form:errors path="project.contactInfo.address.country" id="project.contactInfo.addressCountryErrors" cssClass="error"/>
				</div>
			</fieldset>
		
			<div>				
				<input type="submit" value="Submit" class="button"/>
			</div>
		</form:form>
  
	</body>
</html>											
		